React Komponenttestning: Behärska Snapshot- och Integrationstester

I världen av modern webbutveckling är det av största vikt att säkerställa tillförlitligheten och robustheten i ditt användargränssnitt (UI). React, ett populärt JavaScript-bibliotek för att bygga UI:er, förser utvecklare med en komponentbaserad arkitektur. Att noggrant testa dessa komponenter är avgörande för att leverera en högkvalitativ användarupplevelse. Den här artikeln fördjupar sig i två viktiga teststrategier: snapshot-testning och integrationstestning, och tillhandahåller praktiska exempel och bästa praxis för att hjälpa dig att behärska React-komponenttestning.

Varför testa React-komponenter?

Innan vi dyker in i detaljerna för snapshot- och integrationstestning, låt oss först förstå varför testning av React-komponenter är så viktigt:

• Förhindra regressioner: Tester kan hjälpa till att upptäcka oväntade förändringar i dina komponenters beteende och förhindra att regressioner smyger sig in i din kodbas.
• Förbättra kodkvaliteten: Att skriva tester uppmuntrar dig att tänka på designen och strukturen i dina komponenter, vilket leder till renare och mer underhållbar kod.
• Öka självförtroendet: Att ha en omfattande testsvit ger dig självförtroende när du gör ändringar i din kod, i vetskap om att du kommer att varnas om något går sönder.
• Underlätta samarbete: Tester fungerar som dokumentation för dina komponenter, vilket gör det lättare för andra utvecklare att förstå och arbeta med din kod.

Snapshot-testning

Vad är snapshot-testning?

Snapshot-testning innebär att rendera en React-komponent och jämföra dess utdata (en snapshot) mot en tidigare sparad snapshot. Om det finns några skillnader misslyckas testet, vilket indikerar ett potentiellt problem. Det är som att ta en "bild" av din komponents utdata och se till att den inte ändras oväntat.

Snapshot-testning är särskilt användbart för att verifiera att ditt UI inte har ändrats oavsiktligt. Det används ofta för att upptäcka förändringar i stil, layout eller den övergripande strukturen i dina komponenter.

Hur man implementerar snapshot-testning

Vi kommer att använda Jest, ett populärt JavaScript-testramverk, och Enzyme (eller React Testing Library - se nedan) för att demonstrera snapshot-testning.

Exempel med Jest och Enzyme (Deprecering):

Obs: Enzyme anses vara föråldrat av många till förmån för React Testing Library. Även om det här exemplet demonstrerar användning av Enzyme, rekommenderar vi React Testing Library för nya projekt.

Installera först Jest och Enzyme:

            npm install --save-dev jest enzyme enzyme-adapter-react-16
npm install --save react-test-renderer

            

              
                Copy
              
            
          

Ersätt `react-adapter-react-16` med lämplig adapter för din React-version.

Skapa en enkel React-komponent (t.ex. Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

            

              
                Copy
              
            
          

Skapa nu ett snapshot-test (t.ex. Greeting.test.js):

            import React from 'react';
import { shallow } from 'enzyme';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Kör testet med Jest:

            npm test

            

              
                Copy
              
            
          

Första gången du kör testet kommer Jest att skapa en snapshot-fil (t.ex. __snapshots__/Greeting.test.js.snap) som innehåller den renderade utdata från Greeting-komponenten.

Efterföljande testkörningar kommer att jämföra aktuell utdata med den sparade snapshoten. Om de matchar passerar testet. Om de skiljer sig åt misslyckas testet och du måste granska ändringarna och antingen uppdatera snapshoten eller fixa komponenten.

Exempel med Jest och React Testing Library:

React Testing Library är en modernare och rekommenderad metod för att testa React-komponenter. Den fokuserar på att testa komponenten ur användarens perspektiv, snarare än att fokusera på implementeringsdetaljer.

Installera först Jest och React Testing Library:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest

            

              
                Copy
              
            
          

Ändra snapshot-testet (t.ex. Greeting.test.js):

            import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import '@testing-library/jest-dom/extend-expect';

describe('Greeting Component', () => {
  it('renders correctly', () => {
    const { asFragment } = render(<Greeting name="World" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Kör testet med Jest:

            npm test

            

              
                Copy
              
            
          

Första gången du kör testet kommer Jest att skapa en snapshot-fil (t.ex. __snapshots__/Greeting.test.js.snap) som innehåller den renderade utdata från Greeting-komponenten.

Efterföljande testkörningar kommer att jämföra aktuell utdata med den sparade snapshoten. Om de matchar passerar testet. Om de skiljer sig åt misslyckas testet och du måste granska ändringarna och antingen uppdatera snapshoten eller fixa komponenten.

Bästa praxis för snapshot-testning

• Behandla Snapshots som kod: Lägg till dina snapshot-filer i ditt versionskontrollsystem (t.ex. Git) precis som alla andra kodfiler.
• Granska ändringar noggrant: När ett snapshot-test misslyckas, granska noga ändringarna i snapshot-filen för att avgöra om de är avsiktliga eller indikerar en bugg.
• Uppdatera Snapshots avsiktligt: Om ändringarna är avsiktliga, uppdatera snapshot-filen så att den återspeglar den nya förväntade utdata.
• Använd inte Snapshots för mycket: Snapshot-testning är bäst lämpad för komponenter med relativt stabila UI:er. Undvik att använda den för komponenter som ändras ofta, eftersom det kan leda till många onödiga snapshot-uppdateringar.
• Tänk på läsbarhet: Ibland kan snapshot-filer vara svåra att läsa. Använd verktyg som Prettier för att formatera dina snapshot-filer för bättre läsbarhet.

När du ska använda Snapshot-testning

Snapshot-testning är mest effektiv i följande scenarier:

• Enkla komponenter: Testa enkla komponenter med förutsägbar utdata.
• UI-bibliotek: Verifiera den visuella konsistensen av UI-komponenter över olika versioner.
• Regressionstestning: Upptäcka oavsiktliga förändringar i befintliga komponenter.

Integrationstestning

Vad är integrationstestning?

Integrationstestning innebär att testa hur flera komponenter fungerar tillsammans för att uppnå en specifik funktionalitet. Den verifierar att de olika delarna av din applikation interagerar korrekt och att hela systemet beter sig som förväntat.

Till skillnad från enhetstester, som fokuserar på enskilda komponenter isolerat, fokuserar integrationstester på interaktionerna mellan komponenter. Detta hjälper till att säkerställa att din applikation fungerar korrekt som helhet.

Hur man implementerar integrationstestning

Vi kommer återigen att använda Jest och React Testing Library för att demonstrera integrationstestning.

Låt oss skapa en enkel applikation med två komponenter: Input och Display. Input-komponenten tillåter användaren att mata in text, och Display-komponenten visar den inmatade texten.

Skapa först Input-komponenten (t.ex. Input.js):

            import React, { useState } from 'react';

function Input({ onInputChange }) {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
      placeholder="Ange text..."
    />
  );
}

export default Input;

            

              
                Copy
              
            
          

Skapa sedan Display-komponenten (t.ex. Display.js):

            import React from 'react';

function Display({ text }) {
  return <p>Du angav: {text}</p>;
}

export default Display;

            

              
                Copy
              
            
          

Skapa nu huvudkomponenten App som integrerar Input- och Display-komponenterna (t.ex. App.js):

            import React, { useState } from 'react';
import Input from './Input';
import Display from './Display';

function App() {
  const [inputText, setInputText] = useState('');

  const handleInputChange = (text) => {
    setInputText(text);
  };

  return (
    <div>
      <Input onInputChange={handleInputChange} />
      <Display text={inputText} />
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Skapa ett integrationstest (t.ex. App.test.js):

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('App Component', () => {
  it('uppdaterar skärmen när input ändras', () => {
    render(<App />);
    const inputElement = screen.getByPlaceholderText('Ange text...');
    const displayElement = screen.getByText('Du angav: ');

    fireEvent.change(inputElement, { target: { value: 'Hej, världen!' } });

    expect(displayElement).toHaveTextContent('Du angav: Hej, världen!');
  });
});

            

              
                Copy
              
            
          

Kör testet med Jest:

            npm test

            

              
                Copy
              
            
          

Detta test simulerar att en användare skriver text i Input-komponenten och verifierar att Display-komponenten uppdateras med den inmatade texten. Detta bekräftar att Input- och Display-komponenterna interagerar korrekt.

Bästa praxis för integrationstestning

• Fokusera på nyckelinteraktioner: Identifiera de viktigaste interaktionerna mellan komponenter och fokusera dina integrationstester på dessa.
• Använd realistiska data: Använd realistiska data i dina integrationstester för att simulera verkliga scenarier.
• Hån av externa beroenden: Hån av alla externa beroenden (t.ex. API-anrop) för att isolera dina komponenter och göra dina tester mer pålitliga. Bibliotek som `msw` (Mock Service Worker) är utmärkta för detta.
• Skriv tydliga och koncisa tester: Skriv tydliga och koncisa tester som är lätta att förstå och underhålla.
• Testa användarflöden: Fokusera på att testa kompletta användarflöden för att säkerställa att din applikation beter sig som förväntat ur användarens perspektiv.

När du ska använda integrationstestning

Integrationstestning är mest effektiv i följande scenarier:

• Komplexa komponenter: Testa komplexa komponenter som interagerar med andra komponenter eller externa system.
• Användarflöden: Verifiera att kompletta användarflöden fungerar korrekt.
• API-interaktioner: Testa integrationen mellan dina frontend- och backend-API:er.

Snapshot-testning vs. Integrationstestning: En jämförelse

Här är en tabell som sammanfattar de viktigaste skillnaderna mellan snapshot-testning och integrationstestning:

Välja rätt teststrategi

Den bästa teststrategin beror på de specifika behoven i ditt projekt. I allmänhet är det en bra idé att använda en kombination av både snapshot-testning och integrationstestning för att säkerställa att dina React-komponenter fungerar korrekt.

• Börja med enhetstester: Innan du dyker in i snapshot- eller integrationstester, se till att du har bra enhetstester för dina enskilda komponenter.
• Använd Snapshot-tester för UI-komponenter: Använd snapshot-tester för att verifiera den visuella konsistensen av dina UI-komponenter.
• Använd integrationstester för komplexa interaktioner: Använd integrationstester för att verifiera att dina komponenter interagerar korrekt och att din applikation beter sig som förväntat.
• Överväg End-to-End (E2E)-tester: För kritiska användarflöden, överväg att lägga till end-to-end-tester med verktyg som Cypress eller Playwright för att simulera verkliga användarinteraktioner och verifiera det övergripande applikationsbeteendet.

Utöver Snapshot- och Integrationstester

Medan snapshot- och integrationstester är avgörande, är de inte de enda typerna av tester du bör överväga för dina React-komponenter. Här är några andra teststrategier att tänka på:

• Enhetstester: Som nämnts tidigare är enhetstester viktiga för att testa enskilda komponenter isolerat.
• End-to-End (E2E)-tester: E2E-tester simulerar verkliga användarinteraktioner och verifierar det övergripande applikationsbeteendet.
• Egenskapsbaserad testning: Egenskapsbaserad testning innebär att definiera egenskaper som alltid ska gälla för dina komponenter och sedan generera slumpmässiga indata för att testa dessa egenskaper.
• Tillgänglighetstestning: Tillgänglighetstestning säkerställer att dina komponenter är tillgängliga för användare med funktionshinder.

Slutsats

Testning är en integrerad del av att bygga robusta och pålitliga React-applikationer. Genom att behärska snapshot- och integrationstestningstekniker kan du avsevärt förbättra kvaliteten på din kod, förhindra regressioner och öka ditt självförtroende när du gör ändringar. Kom ihåg att välja rätt teststrategi för varje komponent och att använda en kombination av olika typer av tester för att säkerställa omfattande täckning. Att införliva verktyg som Jest, React Testing Library och eventuellt Mock Service Worker (MSW) kommer att effektivisera ditt testarbetsflöde. Prioritera alltid att skriva tester som återspeglar användarens upplevelse. Genom att omfamna en testkultur kan du bygga högkvalitativa React-applikationer som levererar en fantastisk användarupplevelse till din globala publik.